import React, { useState, useEffect} from 'react';
import { Button,Table,Space,Modal, message} from 'antd';
import { useNavigate,useLocation} from 'react-router-dom';
import { ExclamationCircleFilled } from '@ant-design/icons';
import axios from '../../../../../utils/myAixos'
import "./record.scss"
const { confirm } = Modal;
const Record=()=>{
 
    //保存
    const navigate = useNavigate();
    const handleBack=()=>{
        navigate(-1)
    }
    let location = useLocation();
    console.log("2",location.state.record)
    let location2 = useLocation();
    console.log("3",location2.state.kc_name)
    
    //会员卡
    const columns = [
        {
          title: '姓名',
          align:'center',
          dataIndex: 'y_name',
          key:'y_name'
        },
        {
          title: '电话',
          align:'center',
          dataIndex: 'y_phone',
          key:'y_phone'
        },
        {
            title: '会员卡',
            align:'center',
            dataIndex: 'y_car',
            key:'y_car'
        },
        {
            title: '会员备注',
            align:'center',
            dataIndex: 'address',
            key: 'address'

        },
        {
            title: '状态',
            align:'center',
            dataIndex: 'y_status',
            key:'y_status'
        },
        {
            title: '预约时间',
            align:'center',
            dataIndex: 'time',
            key:"time"
        },
        {
          title: '操作',
          dataIndex: 'm_caozuo',
          align: 'center',
          render: (_, record) => (
              <Space size="middle">
                  <a type="primary" onClick={() => showConfirm(record)}>签到</a>          
                  <a type="primary" onClick={() => recordConfirm(record)}>取消预约</a>
              </Space>
          ),
      },
      ];
      const [dataList, setDataList] = useState([]); //表格数据
      //获取预约记录数据
      const getStu = () => {
          axios({
              url: '/getyuyueDatas',
              method: 'post',
              data:{
                kc_name:location2.state.kc_name
                 }
          }).then(res => {
              console.log('获取预约记录数据', res.data.data)
              console.log(res.status)
              if (res.status === 200) {
                  setDataList(res.data.data)
              }
          }).catch(err => {
              console.log('获取预约记录数据', err)
          })
      }
      //1、获取到预约记录的数据
      useEffect(() => {
        console.log(location.state)
          getStu()
      },[]) 
      //签到
      const [isSign, setIsSign] = useState(0);
      const showConfirm = (row) => {
        console.log(row.id)
        confirm({
          title: '系统提示',
          icon: <ExclamationCircleFilled />,
          content: '确定要为会员签到吗？',
          onOk() {
            console.log('确认');
            axios({
              url: '/yuyueEdit',
              method: 'post',
              data: {
                  id: row.id,
                  y_status:"签到"
              }
          }).then(res => {
              console.log('签到成功', res)
              if (res.status === 200) {
                  message.success("签到成功")
                  setIsSign(isSign + 1)          
                  getStu()
              } else {
                  message.error("签到失败")
              }
          }).catch(err => {
              console.log('签到失败', err)
          })
          },
          onCancel() {
            console.log('取消');
          },
        });
      };
      //取消预约
      const [isCancel, setisCancel] = useState(0);
      const recordConfirm = (row) => {
        confirm({
          title: '系统提示',
          icon: <ExclamationCircleFilled />,
          content: '确定要为会员取消预约吗？',
          onOk() {
            console.log('确认');
            let recordnumber=location.state.record.number||location.state.number-1;
            console.log("2",recordnumber)
            axios({
              url: '/yuyueDel',
              method: 'post',
              data: {
                  id: row.id,
                  number:recordnumber,
                  kc_name:location.state.kc_name               
              }
          }).then(res => {
              console.log('取消预约成功', res)
              if (res.status === 200) {
                  message.success("取消预约成功'")
                  setisCancel(isCancel + 1)
                  getStu()
              } else {
                  message.error("取消预约失败")
              }
          }).catch(err => {
              console.log('取消预约失败', err)
          })
          },
          onCancel() {
            console.log('取消');
          },
        });
      };
    return(
        //排课信息
      <div>
         <header>
                <div style={{display:"flex",justifyContent:"flex-end",margin:"10px"}}>
                    <Button className={"button1"}  onClick={handleBack} >返回</Button>
                </div>
                <div className={"header"}>
                    <div className={"header-2"}>
                        <div >
                            <h5 >课程名称：{location.state.kc_name || location.state.record.kc_name}</h5>
                            <p className={"p1"}>课程时间：{location.state.y_time||location.state.record.y_time}<span>教练：{location.state.teacher||location.state.record.teacher}</span></p>
                            <p className={"p1"}>
                                <span>已预约：{location.state.number||location.state.record.number} </span>
                                <span>已签到：{isSign}</span>
                                <span>已取消: {isCancel}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </header>
        <div className={"box"}>
          <header className={"head"}>
             预约记录
          </header>
            {/* 表单 */}
            <div>
             <Table columns={columns} dataSource={dataList} rowKey={record => record.m_id}  pagination={false}/> 
            </div> 
        </div>
        </div>
    )
}
export default Record